<template>
	<view class="container">
		<!-- 签到标题 -->
		<view class="header">
			<text class="title">签到</text>
		</view>

		<!-- 签到日历 -->
		<view class="calendar">
			<picker mode="date" @change="onDateChange" :value="currentDate">
				<view class="calendar-header">
					<text>{{ formattedDate }}</text>
				</view>
			</picker>
			<view class="calendar-grid">
				<view v-for="(day, index) in daysInMonth" :key="index"
					:class="['calendar-day', { 'signed': isSigned(day) }]">
					<text>{{ day }}</text>
				</view>
			</view>
		</view>

		<!-- 签到按钮 -->
		<view class="sign-in-section">
			<u-button @click="signIn" class="sign-in-button" :disabled="signedToday">
				{{ signedToday ? '今日已签到' : '立即签到' }}
			</u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 定义签到状态和日期相关的响应式变量
	const currentDate = ref(new Date());
	const signedDays = ref([]); // 记录已签到的天数
	const signedToday = ref(false); // 记录今天是否已经签到

	// 获取当前的年和月，计算当月天数
	const getDaysInMonth = (year, month) => {
		return new Date(year, month + 1, 0).getDate();
	};

	const year = ref(currentDate.value.getFullYear());
	const month = ref(currentDate.value.getMonth());
	const daysInMonth = ref(getDaysInMonth(year.value, month.value));

	// 日期格式化
	const formattedDate = ref(`${year.value}年${month.value + 1}月`);

	// 检查当天是否已签到
	const checkIfSignedToday = () => {
		const today = currentDate.value.getDate();
		signedToday.value = signedDays.value.includes(today);
	};

	// 处理签到
	const signIn = () => {
		const today = currentDate.value.getDate();
		if (!signedToday.value) {
			// 增加今天的日期到已签到的天数数组中
			signedDays.value.push(today);
			signedToday.value = true;
            
			// 添加修改操作
			
			// 弹出签到成功提示
			uni.showToast({
				title: '签到成功！',
				icon: 'success',
				duration: 2000,
			});
		}
	};

	// 在页面加载时初始化签到状态
	onMounted(() => {
		checkIfSignedToday();
	});

	// 处理日期更改
	const onDateChange = (e) => {
		currentDate.value = new Date(e.detail.value);
		year.value = currentDate.value.getFullYear();
		month.value = currentDate.value.getMonth();
		daysInMonth.value = getDaysInMonth(year.value, month.value);
		formattedDate.value = `${year.value}年${month.value + 1}月`;
		checkIfSignedToday();
	};

	// 检查某一天是否已签到
	const isSigned = (day) => {
		return signedDays.value.includes(day);
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
	}

	.header {
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.calendar {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		width: 100%;
	}

	.calendar-header {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
	}

	.calendar-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 10px;
	}

	.calendar-day {
		text-align: center;
		padding: 10px;
		border-radius: 50%;
		font-size: 16px;
		color: #333;
		background-color: #f0f0f0;
	}

	.signed {
		background-color: #ff6347;
		color: white;
	}

	.sign-in-section {
		margin-top: 20px;
	}

	.sign-in-button {
		background-color: #ffa500;
		color: #fff;
		font-size: 18px;
		padding: 12px 24px;
		border-radius: 50px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.sign-in-button[disabled] {
		background-color: #ccc;
		cursor: not-allowed;
	}
</style>